<template>
  <!-- 详情 -->
  <popup
    :show="threeLevelShow"
    :title="
      threeLevel.type == 'person'
        ? '人员详情'
        : threeLevel.type == 'unQualified'
        ? '不合格项通知单详情'
        : threeLevel.type == 'acceptance'
        ? '三级验收表详情'
        : threeLevel.type == 'security'
        ? '安全隐患详情'
        : '详情'
    "
    @onClone="threeLevelFun"
  >
    <div class="threeLevelDialog">
      <happy-scroll color="#476396" size="9" resize hide-horizontal>
        <section>
          <ul class="ul">
            <template v-for="(item, index) in data">
              <li :key="index">
                <div class="leftDiv">{{ item.key }}</div>
                <div v-if="item.isFile" class="rightDiv">
                  <img
                    :src="res.path"
                    alt=""
                    v-for="(res, idx) in item.value"
                    :key="idx"
                  />
                </div>
                <div
                  v-else-if="item.isContent"
                  class="rightDiv"
                  style="white-space: pre-wrap"
                >
                  <div v-html="item.value"></div>
                </div>
                <div v-else-if="item.isImg" class="rightDiv">
                  <img :src="item.value" alt="" />
                </div>
                <div v-else class="rightDiv" style="line-height: 60px;">{{ item.value }}</div>
              </li>
            </template>
          </ul>
        </section>
      </happy-scroll>
    </div>
  </popup>
</template>

<script>
import popup from "../../popup.vue";
import api from "@/util/api";
export default {
  components: {
    popup,
  },
  name: "threeLevelDialog",
  data() {
    return {
      threeLevelDialog: `<div>1111111111</div>`,
      data: [],
    };
  },
  computed: {
    threeLevelShow: function () {
      return this.$store.state.threeLevelShow;
    },
    threeLevel: function () {
      return this.$store.state.threeLevel;
    },
  },
  mounted() {},
  watch: {
    threeLevel() {
      console.log("94", this.threeLevel);
      this.getInfoByTypeAndId(this.threeLevel.id, this.threeLevel.type);
    },
  },
  methods: {
    threeLevelFun(data) {
      console.log("99", data);
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "threeLevelShow",
        cont: data,
      });
    },
    getInfoByTypeAndId(id, type) {
      api.getInfoByTypeAndId(
        {
          id: id,
          type: type,
        },
        (res) => {
          console.log("res", res);
          this.data = res.data.data;
        }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.threeLevelDialog {
  width: 1000px;
  height: 580px;
  // overflow: auto;
  p {
    color: #fff !important;
  }
  .ul {
    width: 99%;
    margin: 0 auto;
    padding-right: 20px;
    padding-bottom: 20px;
    li {
      width: 100%;
      list-style-type: none;
      display: flex;
      margin-bottom: 2px;
      .leftDiv {
        width: 200px;
        text-align: left;
        line-height: 60px;
        background-color: rgba(16, 69, 132,0.1);
        text-indent: 30px;
        // border: 1px solid #fff;
      }
      .rightDiv {
        text-indent: 20px;
        width: 780px;
        text-align: left;
        // border: 1px solid #fff;
        img {
          height: 400px;
        }
        p {
          span {
            white-space: pre-wrap !important;
          }
        }
      }
      div {
        min-height: 60px;
        color: #fff;
         white-space: pre-wrap !important;
      }
    }
  }
}
</style>

